<template>
	<view class="u-page fullpage" :style="skin">
		<loading :isShow="pageLoadingShow" size="lg" v-if="!heavyLoad"></loading>
		<view class="top-wrap" v-if="!pageLoadingShow">
			<zx-nav color="#FFFFFF" noBack noHoldHeight noTitle :bg="Topbg">
				<!-- <image :src="logo" mode="widthFix" slot="left" class="logo"></image> -->
				<view slot="left" class="u-flex align-center logo" @tap="navToSelectCity">
					<view class="text-cut" style="max-width: 5em">{{ currentLocation || '' }}</view>
					<u-icon name="arrow-down" style="margin-left: 0.3em"></u-icon>
				</view>
				<searchbar slot="center" bg="rgba(255, 255, 255, 0.8)"></searchbar>
			</zx-nav>
			<tui-bubble-popup
				triangleTop="-22rpx"
				triangleLeft="40rpx"
				left="20rpx"
				right="20rpx"
				direction="top"
				position="absolute"
				:top="CustomBar + 'px'"
				:mask="false"
				:show="loactionTip && isOpenSeting && !showLocation"
				width="710rpx"
			>
				<view class="tui-chat-text flex align-center">
					<text class="flex-sub">{{ customTip[loactionTip] }}</text>
					<view class="btn" v-if="loactionTip != 'notEnabled'" @tap="openSetLocation">开启</view>
					<view class="close" @tap="isOpenSeting = false"><u-icon color="#fff" name="close"></u-icon></view>
				</view>
			</tui-bubble-popup>
		</view>
		<!-- <QSGradientSwiper height="300" circular ref="QSGradientSwiper"></QSGradientSwiper> -->
		<QSGradientSwiper ref="QSGradientSwiper" :autoplay="true" :circular="true" height="220" backgroundHeightScale="1" imgRadius="20"></QSGradientSwiper>
		<!-- 公告 -->
		<navigator url="/pages/article/article" class="notice u-flex align-center mt10" v-if="notice && notice.name">
			<view class="title"><image :src="`${assetsPath}/notice.png`" mode="widthFix"></image></view>
			<view class="line"></view>
			<view class="msg flex-sub">
				<view class="text-cut">{{ notice.name }}</view>
			</view>
			<image class="arrow" :src="`${assetsPath}/right.png`" mode="widthFix"></image>
		</navigator>
		<!-- 今日成交 -->
		<view class="orderbar u-flex align-center">
			<view class="orderbar-num">今日成交 {{ todayQty }} 扎</view>
			<view class="text-cut">
				<rich-text :nodes="msg"></rich-text>
			</view>
		</view>
		<!-- 菜单 -->
		<view class="menu card">
			<view class="cu-list">
				<view class="cu-item" v-for="(item, index) in catelist" :key="index" @tap="href(item)">
					<view class="imgbox flex align-center justify-center"><image :src="item.img" mode="widthFix"></image></view>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="card notice flex align-center mt20" v-if="city_info.info && city_info.is_show_info == 1">
			<text class="text-red">{{ city_info.info || '' }}</text>
		</view>
		<!--广告 ad  -->
		<view class="flex adlist align-center" v-if="activelist.length > 0">
			<navigator class="flex-sub" :url="item.jump" v-for="(item, index) in activelist" :key="index"><image :src="item.img_url" mode="widthFix"></image></navigator>
		</view>
		<!--广告-->
		<view class="ad">
			<image src="../../static/adbg.png" mode="widthFix" class="adbg"></image>
			<view class="flex u-flex-items-center">
				<image src="../../static/adicon.png" mode="widthFix" class="adicon"></image>
				<text class="u-flex-1 u-text-center">自用省钱，分享赚钱，邀请好友加入</text>
				<view class="btn" @tap="navTo('/pages/freshBean/invite')"><view>立即邀请</view></view>
			</view>
		</view>
		<!--限时秒杀-->
		<view class="card card1" v-if="seckillList.length > 0">
			<view class="card-hd u-flex-between u-flex u-flex-items-center">
				<text class="title">限时秒杀</text>
				<view class="more u-flex u-flex-items-center" @tap="navTo('/pages/skilllist/skilllist')">
					<text>查看全部</text>
					<image class="arrow" :src="`${assetsPath}/right.png`" mode="widthFix"></image>
				</view>
			</view>
			<view class="card-bd mt20">
				<scroll-view scroll-x>
					<view class="pro-list flex">
						<view class="pro-item" v-for="(item, index) in seckillList" :key="index" @tap="details(item)">
							<view class="imgbox"><image :src="item.img_url[0] + '?imageView2/0/w/280'"></image></view>
							<view class="name u-line-1">{{ item.name }}</view>
							<view class="price">
								<text class="unit">¥</text>
								{{ item.price }}
							</view>
							<!-- <view class="oldprice">¥{{ item.seckill_price }}</view> -->
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 官方严选 -->
		<view class="card card2 mt20" v-if="yanxuanList.length > 0">
			<view class="card-hd u-flex-between u-flex u-flex-items-center">
				<text class="title">官方严选</text>
				<view class="more u-flex u-flex-items-center" @tap="navTo('/pages/prolist/prolist')">
					<text>查看全部</text>
					<image class="arrow" :src="`${assetsPath}/right.png`" mode="widthFix"></image>
				</view>
			</view>
			<view class="card-bd mt20">
				<scroll-view scroll-x>
					<view class="pro-list flex">
						<view class="pro-item" v-for="(item, index) in yanxuanList" :key="index" @tap="details(item)">
							<view class="imgbox"><image :src="item.img_url[0] + '?imageView2/0/w/280'"></image></view>
							<view class="name u-line-1">{{ item.name }}</view>
							<view class="u-flex u-flex-between u-flex-items-end">
								<view class="price">
									<text class="unit">¥</text>
									{{ item.price }}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="card card3 mt20" v-if="supplierList.length > 0">
			<view class="card-hd u-flex-between u-flex u-flex-items-center">
				<text class="title">供应商推荐</text>
				<view class="more u-flex u-flex-items-center" @tap="navTo('/pages/shoplist/shoplist')">
					<text>查看全部</text>
					<image class="arrow" :src="`${assetsPath}/right.png`" mode="widthFix"></image>
				</view>
			</view>
			<view class="card-bd mt20">
				<scroll-view scroll-x>
					<view class="supplier-list flex">
						<view class="supplier-item" v-for="(item, index) in supplierList" :key="index" @tap="shopDetails(item)">
							<view class="imgbox"><image :src="item.supplier_img + '?imageView2/0/w/200'"></image></view>
							<view class="name u-text-center">{{ item.supplier_name }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback">
			<view class="list">
				<waterfallsFlow :list="productList" :offset="15">
					<!--  #ifdef  MP-WEIXIN -->
					<!-- 微信小程序自定义内容 -->
					<view v-for="(item, index) of productList" :key="index" slot="slot{{index}}">
						<pro-item
							:imgurl="item.img_url[0] + '?imageView2/0/w/400'"
							class="goodsitem"
							type="small"
							:index="index"
							:proinfo="item"
							@addCart="addCart"
							:waterfall="true"
							@showShootVideo="showShootVideo"
						></pro-item>
					</view>
					<!--  #endif -->

					<!-- #ifndef  MP-WEIXIN -->
					<!-- app、h5 自定义内容 -->
					<template v-slot:default="item">
						<pro-item
							:imgurl="item.img_url[0] + '?imageView2/0/w/400'"
							class="goodsitem"
							type="small"
							:index="index"
							:proinfo="item"
							@addCart="addCart"
							:waterfall="true"
							@showShootVideo="showShootVideo"
						></pro-item>
					</template>
					<!-- #endif -->
				</waterfallsFlow>
			</view>
		</mescroll-body>
		<goodsdetails ref="goodsdetails" @changeNum="changeNum"></goodsdetails>
		<!-- 加入福利群 -->
		<u-popup bgColor="transparent" :show="showJoin && homeadImg" mode="center">
			<view class="cu-dialog homeAdwin">
				<image class="join-btn" @tap="navToAd()" :src="homeadImg" mode="widthFix"></image>
				<image @tap="showJoin = !showJoin" class="close" src="../../static/close-join.png" mode="widthFix"></image>
			</view>
		</u-popup>
		<!--选择城市提示-->
		<u-popup :show="showLocation" mode="center">
			<view class="cu-dialog location-modal">
				<view class="title">无法获位置信息</view>
				<view class="close" @tap="showLocation = false"><text class="cuIcon-close"></text></view>
				<view class="subtitle">{{ customTip[loactionTip] }}</view>
				<view class="btnbar flex justify-between">
					<view class="btn" @tap="loactionAddr('handler')">手动选择城市</view>
					<view class="btn active" @tap="loactionAddr('get')">去开启定位</view>
				</view>
			</view>
		</u-popup>
		<!-- 提示切换城市 -->
		<u-popup class="cu-modal" mode="center" :show="showchangeLocation">
			<view class="cu-dialog location-modal">
				<view class="title">位置提示</view>
				<view class="close" @tap="showchangeLocation = false"><text class="cuIcon-close"></text></view>
				<view class="subtitle">当前定位显示“{{ locationCity }}”是否切换？</view>
				<view class="btnbar">
					<view class="btn active" style="width: 100%" @tap="changeAddr()">切换到{{ locationCity }}</view>
					<view class="btn" style="width: 100%" @tap="showchangeLocation = false">继续浏览{{ currentLocation }}</view>
				</view>
			</view>
		</u-popup>
		<sVideo ref="sVideo"></sVideo>
	</view>
</template>

<script>
import loading from '@/components/loading';
import searchbar from '@/components/searchbar';
import zxNav from '@/components/zx-nav/zx-nav';
import QSGradientSwiper from '@/components/QS-Gradient-Swiper/QS-Gradient-Swiper-vue';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import waterfallsFlow from '@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue';
import proItem from '@/components/pro-item';
import goodsdetails from '@/components/goodsdetails';
import tuiBubblePopup from '@/components/tui-bubble-popup/tui-bubble-popup';
import sVideo from '@/components/s-video/s-video';
import { mapState, mapMutations } from 'vuex';
import sharemixin from '@/common/sharemixin.js';
import loactionmixin from '@/common/loactionmixin.js';
export default {
	data() {
		return {
			pageLoadingShow: !0,
			heavyLoad: !1,
			banner: [],
			catelist: [],
			seckillList: [],
			yanxuanList: [],
			supplierList: [],
			productList: [],
			Topbg: '',
			allcateImg: '',
			todayQty: 0,
			notice: '',
			share_img: '',
			activelist: [],
			showJoin: true,
			homeadImg: '',
			homeadUrl: ''
		};
	},
	computed: {
		...mapState(['CustomBar', 'cartNum', 'city_info', 'appName', 'sysInfo', 'currentLocation', 'locationCity']),
		logo() {
			return this.sysInfo && this.sysInfo.applet_info && this.sysInfo.applet_info.logo;
		},
		msg() {
			return this.sysInfo && this.sysInfo.home_set && this.sysInfo.home_set.home_title_info;
		}
	},
	components: { loading, searchbar, zxNav, QSGradientSwiper, waterfallsFlow, proItem, goodsdetails, tuiBubblePopup, sVideo },
	mixins: [MescrollMixin, sharemixin, loactionmixin],
	watch: {
		banner: function (t) {
			this.$refs.QSGradientSwiper && this.$refs.QSGradientSwiper.setData(t);
		},
		shareInfo() {
			this.share_img = this.shareInfo.img_url_xcx;
		},
		currentLocation(newVal, oldVal) {
			if (newVal != oldVal && newVal) {
				//刷新产品信息接口
				this.downCallback();
				this.init();
			}
		}
	},
	created() {
		setTimeout(() => {
			this.pageLoadingShow = !1;
		}, 500);
		this.getLocationAuth();
	},
	onPageScroll: function (e) {
		this.Topbg = e.scrollTop > this.CustomBar ? this.themeColor : '';
	},

	onShow() {
		this.setCartNum(this.cartNum || '0');
		this.getTodayQty();
		this.getArticleList();
		this.getActivelist();
		this.getCateList();
		this.getIndexBanner(1);
		this.getIndexBanner(5);
		this.getIndexBanner(6);
		this.init();
	},
	methods: {
		...mapMutations(['SET_CATEID', 'setCartNum']),
		init() {
			this.getProductList('seckill');
			this.getProductList('yanxuan');
			this.getHomesupplier();
		},
		upCallback() {
			this.getProductList();
		},
		getProductList(type) {
			this.$postAction(
				this.$api.getProductList,
				Object.assign(
					type == 'seckill'
						? {
								is_seckill: 1
						  }
						: type == 'yanxuan'
						? {
								is_yanxuan: 1
						  }
						: {
								is_top: 1,
								page: this.mescroll.num,
								limit: this.mescroll.size
						  }
				),
				{
					custom: {
						ShowLoading: false
					}
				}
			).then(da => {
				if (type == 'seckill') {
					this.seckillList = da.data || [];
				} else if (type == 'yanxuan') {
					this.yanxuanList = da.data || [];
				} else {
					if (da.code == 0 && da.data && da.data.length > 0) {
						let curPageData = da.data;
						this.mescroll.endBySize(curPageData.length, da.count);
						if (this.mescroll.num == 1) this.productList = []; //如果是第一页需手动制空列表
						this.productList = this.productList.concat(curPageData); //追加新数据
						console.log('this.productList', this.productList);
					} else {
						if (this.mescroll.num == 1) this.productList = [];
						this.mescroll.endSuccess(0, false);
					}
				}
			});
		},
		getHomesupplier() {
			this.$postAction(
				this.$api.getHomesupplier,
				{
					page: 1,
					limit: 10
				},
				{
					custom: {
						ShowLoading: false
					}
				}
			).then(da => {
				this.supplierList = da.data;
			});
		},
		/* 获取商品分类 */
		getCateList() {
			this.$postAction(
				this.$api.getCateList,
				{
					status: 1,
					page: 1,
					limit: 20
				},
				{
					custom: {
						ShowLoading: false
					}
				}
			).then(da => {
				if (da.code == 0) {
					let catelist = da.data.slice(0, 9);
					catelist.forEach(item => {
						item.url = '/pages/classify/classify';
						item.width = uni.upx2px(120);
						item.img = item.img_url;
					});
					catelist.push({
						img: this.allcateImg || '/static/menu/10.png',
						name: '全部花材',
						url: '/pages/classify/classify',
						width: uni.upx2px(120)
					});

					this.catelist = [...catelist];
					console.log('catelist', this.catelist);
				}
			});
		},
		getIndexBanner(type) {
			this.imglist = [];
			this.$postAction(
				this.$api.getAdList,
				{ type },
				{
					custom: {
						ShowLoading: false
					}
				}
			).then(da => {
				if (da.code == 0 && da.data && da.data.length > 0) {
					let list = da.data.map(item => {
						item.loaded = false;
						item.backgroundColor = item.color;
						return item;
					});
					if (type == 1) {
						setTimeout(() => {
							this.banner = [...list];
						}, 100);
						this.$nextTick(() => {});
						// this.imglistLen = this.imglist.length;
					} else if (type == 3) {
						this.goods_adlist = list;
						this.goods_adLen = this.goods_adlist.length;
					} else if (type == 5) {
						this.allcateImg = da.data[0].img_url;
					} else if (type == 6) {
						this.homeadImg = da.data[0].img_url;
						this.homeadUrl = da.data[0].path;
					}
				}
			});
		},
		details(proinfo) {
			this.$Router.push({
				path: '/pages/goodsdetails/goodsdetails?id=' + proinfo.id
			});
		},
		shopDetails(shopinfo) {
			this.$Router.push({
				path: '/pages/shop/shop?id=' + shopinfo.id
			});
		},
		href(cate) {
			this.SET_CATEID(cate.id);
			this.$Router.pushTab({
				path: '/pages/classify/classify'
			});
		},
		navTo(path, type) {
			if (!type) {
				type = 'navigateTo';
			}
			uni[type]({
				url: path
			});
		},
		addCart(info) {
			this.$refs.goodsdetails.show(info);
		},
		changeNum(e) {
			let index = e.index;
			let info = this.productList[index];
			info.cart_num = e.cart_num;
			this.$set(this.productList, index, info);
		},
		getTodayQty() {
			this.$postAction(this.$api.todayQty, null, {
				custom: {
					ShowLoading: false
				}
			}).then(da => {
				this.todayQty = da.data.qty;
			});
		},
		// getNotice() {
		// 	this.$postAction(this.$api.notice).then(da => {
		// 		this.notice = da.data.client;
		// 	});
		// }
		/* 获取花比头条 */
		getArticleList() {
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			let param = {
				page: 1,
				limit: 1,
				type: 13
			};
			this.$postAction(this.$api.getArticleList, param, {
				custom: {
					ShowLoading: false
				}
			}).then(da => {
				this.notice = da.data[0];
			});
		},
		getActivelist() {
			this.$postAction(this.$api.getActivelist, null, {
				custom: {
					ShowLoading: false
				}
			}).then(da => {
				this.activelist = da.data.active_data;
			});
		},
		navToAd() {
			uni.navigateTo({
				url: this.homeadUrl
			});
		},
		/* 选择定位方式 */
		loactionAddr(way) {
			this.showLocation = false;
			if (way == 'handler') {
				this.navToSelectCity();
			} else {
				this.openSetLocation();
			}
		},
		openSetLocation() {
			let that = this;
			wx.openSetting({
				success: function (dataAu) {
					if (dataAu.authSetting['scope.userFuzzyLocation'] == true) {
						that.getLoaction();
					} else {
						that.isOpenSeting = true;
						that.loactionTip = 'wxAppNotDenied';
					}
				}
			});
		},
		/* 跳转城市选择 */
		navToSelectCity() {
			uni.navigateTo({
				url: '/pages/selectCity/selectCity?loactionTip=' + (this.isOpenSeting ? this.loactionTip : '')
			});
		},
		showShootVideo(info) {
			this.$refs.sVideo.show(info);
		}
	}
};
</script>

<style lang="scss">
@import '@/common/location.scss';
.top-wrap {
	// background: linear-gradient(180deg, #ff8173 0%, #f4f4f4 100%);
	background: #f4f4f4;
	position: fixed;
	top: 0;
	width: 100%;
	left: 0;
	z-index: 999;
	.tui-chat-text {
		padding: 20upx;
		.btn {
			width: 4em;
			background: $u-primary;
			border-radius: 5upx;
			line-height: 40upx;
			text-align: center;
			font-size: 20upx;
			margin: 0 12upx;
		}
	}
}
.logo {
	color: #333;
}
.notice {
	background: #fff;
	border-radius: 8upx;
	margin: 0 28upx;
	padding: 0 28upx;
	height: 80upx;
	color: $u-primary;
	font-size: 26upx;
	.line {
		width: 1px;
		height: 50upx;
		background: #ddd;
		margin: 0 28upx;
	}
	.title {
		width: 63upx;
		height: 28upx;
		image {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	.msg {
		width: 0;
		margin-right: 50upx;
	}
	.arrow {
		display: block;
		width: 28upx;
		height: 28upx;
	}
}
.orderbar {
	height: 58upx;
	background: #fff;
	border-radius: 4px;
	font-size: 22upx;
	color: #646464;
	margin: 15upx 28upx 15upx;
	text-align: center;
	white-space: nowrap;
	line-height: 58upx;
	.orderbar-num {
		background: #ffeaeb;
		color: var(--nav-bg);
		font-size: 24upx;
		padding: 0 12upx 0 8upx;
		& + div {
			padding: 0 10upx;
		}
	}
}
.menu {
	padding: 16upx 10upx;
	margin: 0 28upx;
	.cu-list {
		text-align: center;
		font-size: 26upx;
		color: #48484a;
		overflow: hidden;
		.cu-item {
			width: 20%;
			float: left;
			margin: 5upx 0;
			.imgbox {
				width: 120upx;
				height: 120upx;
				margin: 0 auto 5upx;
				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
.ad {
	position: relative;
	font-size: 26upx;
	font-weight: 500;
	color: #ffffff;
	margin: 20upx 28upx;
	padding: 0 20upx;
	.adbg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 80upx;
	}
	.adicon {
		width: 44upx;
		height: 49upx;
	}
	& > view {
		position: relative;
		z-index: 1;
		height: 80upx;
	}
	.btn {
		width: 149upx;
		height: 58upx;

		border-radius: 29upx;
		font-size: 26upx;
		font-weight: 500;
		color: var(--nav-bg);
		text-align: center;
		line-height: 58upx;
		position: relative;
		&::before {
			content: '';
			height: 100%;
			width: 100%;
			display: block;
			position: absolute;
			top: 3upx;
			left: 0;
			background: #e32532;
			border-radius: 29px;
		}
		& > view {
			background: #ffffff;
			position: relative;
			z-index: 1;
			border-radius: 29upx;
		}
	}
}
.card {
	margin-left: 28upx;
	margin-right: 28upx;
	padding: 23upx 20upx 28upx;
	background: #fff no-repeat left top;
	&.card1 {
		background-image: url(/static/home/bg1.png);
	}
	&.card2 {
		background-image: url(/static/home/bg2.png);
	}
	&.card3 {
		background-image: url(/static/home/bg3.png);
	}
	.card-hd {
		.title {
			font-size: 36upx;
			font-weight: 500;
			color: #1c1c1e;
			line-height: 54upx;
		}
		.more {
			color: #757575;
			font-size: 24upx;
			.arrow {
				width: 24upx;
				height: 24upx;
				display: block;
				margin-left: 4upx;
			}
		}
	}
	.pro-list {
		.pro-item {
			width: 140upx;
		}
		.pro-item + .pro-item {
			margin-left: 20upx;
		}

		.imgbox {
			height: 140upx;
			width: 140upx;
			display: block;
			overflow: hidden;
			border-radius: 12upx;
		}
		.name {
			font-weight: 500;
			color: #1c1c1e;
			line-height: 40upx;
			margin-top: 12upx;
		}
		.price {
			font-weight: 500;
			color: #ff453a;
			.unit {
				font-size: 20upx;
			}
		}
		.oldprice {
			color: #b7b7b7;
			font-size: 22upx;
			text-decoration: line-through;
		}
	}
	.supplier-list {
		.imgbox {
			width: 100upx;
			height: 100upx;
			border: 2px solid var(--nav-bg);
			border-radius: 100%;
			overflow: hidden;
			margin: 0 auto;
		}
		.supplier-item + .supplier-item {
			margin-left: 36upx;
		}
		.name {
			font-weight: 500;
			color: #1c1c1e;
			line-height: 40upx;
			margin-top: 18upx;
			white-space: nowrap;
		}
	}
}
.list {
	margin: 20upx 28upx;
}
/* 广告推荐 */
.adlist {
	margin: 20upx 28upx 0;
	& > navigator {
		// margin: 0 10upx;
		image {
			width: 100%;
			border-radius: 10upx;
			overflow: hidden;
			display: block;
		}
	}
}
.homeAdwin {
	width: 80vw;
	image {
		display: block;
		width: 100%;
		margin: 0 auto;
	}
	.close {
		width: 66rpx;
		margin: 30upx auto 16rpx;
	}
}
</style>
